import MyModal from "@/components/MyModal";
import { RoomTypeEnum } from "@/constants/enum";
import { getFacilityList } from "@/services/facility/facility";
import {
  getFloorList,
} from "@/services/floor/floor";
import { addRoom, editRoom, getRoomDetail } from "@/services/room/room";
import { objToArr } from "@/utils";
import { useBoolean, useRequest } from "ahooks";
import { Form, Input, InputNumber, Select, message } from "antd";
import { useEffect, useMemo } from "react";

export default ({ open, close, refresh, id }) => {
  const [form] = Form.useForm();
  const [loading, { toggle: toggleLoading }] = useBoolean(false);
  const { data: floorList } = useRequest(getFloorList);
  const { data: facilityList } = useRequest(getFacilityList);

  const onOk = async () => {
    const values = await form.validateFields();
    const fun = id ? editRoom : addRoom;
    toggleLoading();
    try {
      await fun({ ...values, roomId: id });
      message.success(id ? "修改成功" : "新增成功");
      close();
      refresh();
    } finally {
      toggleLoading();
    }
  };
  const { loading: queryLoading } = useRequest(getRoomDetail, {
    manual: !id,
    defaultParams: [id],
    onSuccess: (res) => {
      form.setFieldsValue(res);
    },
  });
  const title = useMemo(() => {
    return (id ? "修改" : "新增") + "客房信息";
  }, [id]);

  return (
    <MyModal
      title={title}
      open={open}
      close={close}
      onOk={onOk}
      queryLoading={queryLoading}
      confirmLoading={loading}
    >
      <Form form={form} wrapperCol={{ span: 24 }} layout="vertical">
        <Form.Item
          name="roomNum"
          rules={[
            {
              required: true,
            },
          ]}
          label="房间号"
        >
          <Input placeholder="请输入" />
        </Form.Item>
        <Form.Item
          name="roomPrice"
          rules={[
            {
              required: true,
            },
          ]}
          label="价格"
        >
          <InputNumber min={1} style={{ width: "200px" }} prefix="￥" suffix="RMB" />
        </Form.Item>
        <Form.Item
          name="floorId"
          label="楼层"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Select
            options={floorList}
            fieldNames={{
              label: "floorName",
              value: "floorId",
            }}
            placeholder="请选择"
          />
        </Form.Item>
        <Form.Item
          name="facilityIds"
          label="房间设施"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Select
            mode="multiple"
            options={facilityList}
            fieldNames={{
              label: "facilityName",
              value: "facilityId",
            }}
            placeholder="请选择"
          />
        </Form.Item>
        <Form.Item
          name="roomType"
          label="房间类型"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Select
            options={objToArr(RoomTypeEnum)}
            fieldNames={{
              label: "value",
              value: "key",
            }}
            placeholder="请选择"
          />
        </Form.Item>
      </Form>
    </MyModal>
  );
};
